<template>
  <div class="mizone-ce">
    <NowLoading :mycolor="'transparent'" v-if="firstLoading"/>  
<div v-else>
  <div v-if="L===0" class="kong">
      <van-image
      class="kong-img"
     :src="kong"
    />
   <div class="no-commit">暂时没有测评</div>
    </div>
    <div v-else class="content">
      <!-- {{ mizoneCe }} -->
      <van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  :immediate-check="false"
>
      <div v-for="item in mizoneCe" :key="item.id">
        <!-- {{ item }} -->
      <!-- {{ item.id }} -->
      <!-- <DetailItem v-if="item.content_type===100 || item.content_type===1"
        :id="item.id"
        :nickname="item.nickname"
        :icon="item.icon"
        :content_type="item.content_type"
        :content="item.content"
        :pic_list="item.pic_list"
        :tag_list="item.tag_list"
        :hot_comment="item.hot_comment"
        :comment_num="item.comment_num"
        :praise_num="item.praise_num"
       /> -->
       <TestItem
        :id="item.id"
        :nickname="item.nickname"
        :icon="item.icon"
        :content_type="item.content_type"
        :content="item.content"
        :video_list="item.video_list"
        :tag_list="item.tag_list"
        :hot_comment="item.hot_comment"
        :comment_num="item.comment_num"
        :praise_num="item.praise_num"
        />
     </div>
    </van-list>
    </div>
  
</div>

  </div>
</template>

<script setup lang="ts">
import NowLoading from '../../../../components/NowLoading.vue'
import TestItem from '../../findItem/recommendItem/TestItem.vue'
import DetailItem from '../../findItem/recommendItem/DetailItem.vue'
import { recommendM } from '../../../../typings'
import { getMizoneContentList } from '../../../../api/find'
import { onMounted, reactive, ref, nextTick } from 'vue'
import { useRoute } from 'vue-router';
import kong from '../../../../assets/img/no-q.png'
const route = useRoute();
const r = Number(route.query.id);
const L = ref(1);
const page = ref(1);
const loading = ref(false);
const finished = ref(false);
const firstLoading = ref(true);
let mizoneCe = reactive<Array<recommendM>>([]);
  onMounted( () => {
    getData(r,page.value);
  })
const getData =async (r:number,p:number) => {
  let resCe = await getMizoneContentList(r,p);
  mizoneCe = resCe.data.content_list;
  firstLoading.value = false;
  if (mizoneCe.length===0) {
    L.value = 0;
    }
}
const onLoad = () => {
  setTimeout(() => {
    getData(r,page.value);
    nextTick(() => {
      console.log("测评num=>",page.value);
      loading.value = false;
      page.value += 1;
        })
        // 加载状态结束
        // 数据全部加载完成
        if (mizoneCe.length >= 1000) {
          finished.value = true;
        }
      }, 1200);
};

</script>

<style lang="scss" scoped>
.mizone-ce {
  background-color: #f6f6f6;
  // height: 100vh;
}
.kong {
  text-align: center;
  background-color: #f5f5f5;
  height: calc(100vh - 14.79rem);
  .kong-img {
  width: 50vw;
  margin-top: 3rem;
}
.no-commit {
  font-size: .8rem;
  color: #757575;
}
}
// .content {
//   padding-bottom: 3rem;
// }
</style>